<template>
  <div>
    <Form layout="inline" :model="formState">
      <FormItem label="企业名称">
        <Select
          v-model:value="formState.tenantIdList"
          :options="tenantOpt"
          mode="multiple"
          style="width: 200px"
          placeholder="请选择"
        ></Select>
      </FormItem>
      <FormItem label="应用名称">
        <Select
          v-model:value="formState.appIdList"
          :options="appOpt"
          style="width: 200px"
          mode="multiple"
          placeholder="请选择"
        ></Select>
      </FormItem>
      <FormItem label="状态">
        <Select
          v-model:value="formState.statusList"
          :options="statusListOpt"
          style="width: 200px"
          mode="multiple"
          placeholder="请选择"
        ></Select>
      </FormItem>
      <FormItem label="订单来源">
        <Select
          v-model:value="formState.sourceList"
          :options="sourceOpt"
          style="width: 200px"
          mode="multiple"
          placeholder="请选择"
        ></Select>
      </FormItem>
      <div>
        <Tooltip title="查询">
          <Button type="primary" @click="search" shape="circle"
            ><template #icon><SearchOutlined /></template
          ></Button>
        </Tooltip>
        <Tooltip title="重置">
          <Button style="margin-left: 10px" @click="reset" shape="circle"
            ><template #icon><ReloadOutlined /></template
          ></Button>
        </Tooltip>
      </div>
    </Form>
  </div>
</template>
<script lang="ts" setup>
import { Tooltip, Form, FormItem, Select, Button } from 'ant-design-vue';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { EtpAppTableParams } from '/@/api/tenant-mgmt/enterpriseAppManagement/model/enterpriseAppManagementModel';
import {
  getAppOpt,
  getAppStatusOpt,
  getSourceOpt,
} from '/@/api/tenant-mgmt/enterpriseAppManagement/enterpriseAppManagement';
import { getAlias } from '/@/api/tenant-mgmt/enterpriseAppAuth/enterpriseAppAuth';
let formState = ref({} as EtpAppTableParams);
const statusListOpt = ref();
const sourceOpt = ref();
const appOpt = ref();
const tenantOpt = ref();
const getAppStatusListOpt = async () => {
  statusListOpt.value = await getAppStatusOpt();
  sourceOpt.value = await getSourceOpt();
  appOpt.value = await getAppOpt();
  tenantOpt.value = await getAlias();
};
getAppStatusListOpt();

const emit = defineEmits(['get']);
const search = () => {
  emit('get', formState.value);
};

const reset = () => {
  formState.value = {} as EtpAppTableParams;
  emit('get', formState.value);
};
</script>
